<template>
    <div>  
         <h1>显示食谱信息列表</h1>
    </div>
    名称:
    <input type="text" v-model="te.name">
    分类编号:
     <select v-model="te.classificationId">
                        <option value="-1">==请选择分类==</option>
                        <option v-for="a in obj" :value="a.classificationId">{{a.classificationName}}</option>
                    </select>

         <input type="button" value="查询" @click="seleteShow">
    <table class="table">
        <thead>
            <tr>
                <td>名称</td>
                <td>食谱标题</td>
                <td>分类名称</td>
                <td>标签</td>
                <td>分享</td>
                <td>图片</td>
                <td>发布时间</td>
            </tr>
        </thead>
             <tbody>
            <tr v-for="a in data">
                <td>{{a.recipeName}}</td>
                <td>{{a.recipeType}}</td>
                <td>{{a.classificationName}}</td>
                <td>{{a.label}}</td>
                <td>{{a.share}}</td>
                <td><img style="width:45px;height:45px" :src="axios.defaults.baseURL+a.recipeImg"></td>
                <td>{{moment( a.recipeDate).format("yyyy-MM-DD")}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
 import axios from 'axios';
  import{ref,onMounted} from 'vue';
 import {useRouter} from 'vue-router';
 import moment from 'moment'
   const router=useRouter();
    onMounted(()=>{
        classifications();
        Show();

    })
     const obj=ref([{
          "classificationId": 0,
    "classificationName": ""
     }])
     const classifications=()=>{
        
         axios.get("https://localhost:7235/api/Classification/classifications").then(res=>{
               obj.value=res.data
         })
     }

      const data=ref([{
         "recipeName": "汉堡包",
    "classificationId": 1,
    "share": 100,
    "label": "虾仁汉堡包",
    "recipeType": "虾仁",
    "recipeId": 1,
    "recipeImg": "/pic/f9158328-46b7-47c7-a399-c29a6d1885f44.png",
    "classificationName": "水果分类",
    "recipeDate": "2020-02-09T14:00:00"
      }])


    const seleteShow=()=>{
Show();

    }

 const te=ref({
     name:'',
     classificationId:-1,

 })
     const Show=()=>{
         axios.get("https://localhost:7235/api/Recipe/Show",{params:te.value}).then(res=>{
             data.value=res.data
         })
     }
</script>

<style scoped>

</style>